import React from 'react';
import { createForm } from 'rc-form';
import { Button, InputItem, WingBlank, WhiteSpace,Toast,DatePicker,List,Picker } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import request from '../../../../utils/request';
import { hashHistory } from 'react-router';
var moment=require('moment');

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const questions = [
    [
        {
            label: '你出生日期',
            value: '你出生日期',
        },
        {
            label: '你就读的小学',
            value: '你就读的小学',
        },
    ],
];
const sexs = [
    [
        {
            label: '保密',
            value: 0,
        },
        {
            label: '男',
            value: 1,
        },
        {
            label: '女',
            value: 2,
        },
    ],
];
class Register extends React.Component {

    state = {
        birthday: now,
        question: '',
        sex: '',
    }
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    componentDidMount() {
        this.props.changeTitle('快速注册');
    }
    //注册
    submit = (e) => {
        // const { getFieldError } = this.props.form;
        let userMsg = this.props.form.getFieldsValue(); //{userName: "1", password: "1", confirmPwd: "1", answer: "1", phoneNum: ""}
        if (userMsg.userName == ''){
            Toast.info("用户名不能为空！",1);
            return;
        }
        if (userMsg.password == ''){
            Toast.info("密码不能为空！",1);
            return;
        }
        if (userMsg.password !== userMsg.confirmPwd ){
            Toast.info("两次输入的密码不一致！",1);
            return;
        }
        if (this.state.question == "" || this.state.question == undefined){
            Toast.info("密码提问不能为空！",1);
            return;
        }
        if (userMsg.answer == ''){
            Toast.info("提问答案不能为空！",1);
            return;
        }
        this.props.form.validateFields({ force: true },
            (err, values) => {
                if (!err) {
                    values = {...values,
                                question:this.state.question,
                                sex:this.state.sex,
                                birthday:this.state.birthday
                            };
                    // values.question=this.state.question;
                    // values.sex = this.state.sex;
                    // values.birthday = this.state.birthday;
                    request('RegisterService','register', {
                        method: 'POST',
                        body: values,
                    }).then(function (value) {
                        if (value.data.result === 0){
                            hashHistory.push({
                                pathname: '/login'
                            })
                        }else if (value.data.result === 1){
                            Toast.info("服务器异常，请稍后再试！",1);
                        }else if (value.data.result === 5){
                            Toast.info("用户名已经存在，请重新输入！",2);
                        }
                    });
                }
            }
        );
    }

    render() {
        const { getFieldProps } = this.props.form;
        const { getFieldError } = this.props.form;
        return (
            <List className="my-list">
                <WhiteSpace/>
                <InputItem
                    {...getFieldProps('userName',
                        {
                            initialValue: '',
                            rules: [
                                {required: true, message: '用户名不能为空!'},
                            ],
                        })}
                    error={!!getFieldError('userName')}
                    onErrorClick={() => {
                        Toast.fail(getFieldError('userName'), 1);
                    }}
                    type="text"
                    placeholder="请输入用户名">
                    用户名
                </InputItem>
                <InputItem
                    {...getFieldProps('password',
                        {
                            initialValue: '',
                            rules: [
                                {required: true, message: '密码不能为空!'},
                            ],
                        })}
                    error={!!getFieldError('password')}
                    onErrorClick={() => {
                        Toast.fail(getFieldError('password'), 1);
                    }}
                    type="password"
                    placeholder="请输入密码">
                    密码
                </InputItem>
                <InputItem
                    {...getFieldProps('confirmPwd',
                        {
                            initialValue: '',
                        })}
                    error={!!getFieldError('confirmPwd')}
                    onErrorClick={() => {
                        Toast.fail(getFieldError('confirmPwd'), 1);
                    }}
                    type="password"
                    placeholder="请再次输入密码">
                    确认密码
                </InputItem>
                <Picker
                    data={questions}
                    title="密码提问"
                    cascade={false}
                    extra="请选择(可选)"
                    value={this.state.question}
                    onChange={v => this.setState({ question: v })}
                    onOk={v => this.setState({ question: v })} >
                    <List.Item arrow="horizontal">密码提问</List.Item>
                </Picker>
                <InputItem
                    {...getFieldProps('answer',
                        {
                            initialValue: '',
                            rules: [
                                {required: true, message: '提问答案不能为空!'},
                            ],
                        })}
                    error={!!getFieldError('answer')}
                    onErrorClick={() => {
                        Toast.fail(getFieldError('answer'), 1);
                    }}
                    type="text"
                    placeholder="请输入密码提问答案">
                    密码回答
                </InputItem>
                <Picker
                    data={sexs}
                    title="选择性别"
                    cascade={false}
                    extra="请选择(可选)"
                    value={this.state.sex}
                    onChange={v => this.setState({ sex: v })}
                    onOk={v => this.setState({ sex: v })} >
                    <List.Item arrow="horizontal">性别</List.Item>
                </Picker>
                <DatePicker
                    mode="date"
                    title="出生日期"
                    extra="请选择(可选)"
                    minDate={moment('1900-01-01', 'YYYY-MM-DD')}
                    // maxDate={moment('1900-01-01', 'YYYY-MM-DD')}
                    value={this.state.birthday}
                    onChange={birthday => this.setState({ birthday })}
                    onOk={birthday => this.setState({ birthday: birthday })}>
                    <List.Item arrow="horizontal">出生日期</List.Item>
                </DatePicker>

                <InputItem
                    {...getFieldProps('phoneNum',
                        {
                            initialValue: '',
                        })}
                    error={!!getFieldError('phoneNum')}
                    onErrorClick={() => {
                        Toast.fail(getFieldError('phoneNum'), 1);
                    }}
                    type="text"
                    placeholder="请输入移动电话">
                    移动电话
                </InputItem>
                <WingBlank>
                    <WhiteSpace/>
                    <Button type="warning" size="large" onClick={this.submit}>确 定</Button><WhiteSpace/>
                </WingBlank>
            </List>
        );
    }
}

export default createForm()(Register);
